<template>
	<view>
		<view>
			<mzy-tabs :list="list" v-model="active" grow="ture" @change="handleChange" />
		</view>
		<!-- 视频页面组件 -->
		<home-video v-if="currentIndex==1"/>
		<!-- 茶农页面组件 -->
		<tea-grower v-else-if="currentIndex==2"/>
		<!-- 茶商页面组件 -->
		<tea-busness v-else-if="currentIndex==3" />
		<!-- 关注页面组件 -->
		<follow v-else-if="currentIndex==4"/>
		<!-- 推荐页面组件 -->
		<recommend v-else-if="currentIndex==0"/>
	</view>
</template>
 ui
<script>
const list = ['推荐', '视频', '茶农', '茶商', '关注'];
import HomeVideo from "@/components/home-video.vue";
import Follow from "@/components/dis-fllow-com/dis-fllow-com.vue"
import Recommend from "@/components/dis-recommend/dis-recommend.vue" 
import TeaGrower from "@/components/dis-tea-grower/dis-tea-grower.vue"
import TeaBusness from "@/components/dis-tea-busness/dis-tea-busness.vue"
export default {
	data: () => ({
		list,
		active: 0,
		currentIndex:0
	}),
	components:{
		HomeVideo,
		Follow,
		Recommend,
		TeaGrower,
		TeaBusness
	},
	methods: {
		/**
		 * 第一个参数是索引，第二个参数是对应的元素
		 */
		handleChange(index, tab) {
			console.log(index, tab);
			this.currentIndex=index;
		},
		/** 
		 *页面跳转
		 * */
		 pageRoute(){
			uni.navigateTo({
			    url: 'test?id=1&name=uniapp'
			});
		 }
	}
};
</script>

<style lang="scss">


</style>
